<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--
        在子组件中调用父组件中的方法，或者是父组件监听子组件事件
        1、子组件的某个元素上绑定一个事件 @click="$emit('bigger',sonData)"
        2、在父组件使用子组件的时候，指定属性  @bigger="beBigger($event)"
        3、其中@bigger就是子组件绑定事件时候的参数'bigger'
        4、而beBigger则是父组件中的普通方法
        5、使用$event传值，可以是对象或者是普通字符串啥的


    -->
    <my-event :post="post" @bigger="beBigger($event)"></my-event>
</div>

<script src="lib/vue.js"></script>
<script>
    Vue.component('my-event',{
        data:function () {
            return {
                sonData:'来自儿子的参数'
            }
        },
        props:['post'],
        template:`
            <div>
              <h3>{{ post.title }}</h3>
              <button @click="$emit('bigger',sonData)">
                Enlarge text
              </button>
              <div v-html="post.content"></div>
            </div>`
    });

    let app = new Vue({
        el: '#app',
        data: {
            post: {id:1,title:'hhhh',content:'hello~~~'},
        },
        methods: {
            beBigger(event){
                alert('变大'+event)
            }
        }
    })
</script>
</body>
</html>